<template>
  <el-container style="height: 100%;">
    <el-main style="overflow: hidden;">
      <transition name="fade-transform" mode="out-in">
        <component :is="activeComponent" :params="params" @changeComponent="changeComponent" ref="com"/>
      </transition>
    </el-main>
  </el-container>
</template>

<script>
import databaseconfig from './databaseconfig';
import databaseresource from './databaseresource';
import databasedetail from './databasedetail';

export default {
  name: 'databaseIndex',
  components: {
    databaseconfig,
    databaseresource,
    databasedetail
  },
  data() {
    return {
      params: '',
      activeComponent: 'databaseresource'
    };
  },
  methods: {
    changeComponent(path) {
      console.info(path);
      this.activeComponent = path.active;
      this.params = path;
    },
    layout() {
      this.$refs.com.layout&&this.$refs.com.layout();
    }
  },
  mounted() {
    this.$nextTick(function() {});
  },
  destroyed() {
    console.info('destroyed');
  }
};
</script>

<style scoped>
</style>
